<html>
    <head>
        <title>单个根元素</title>
    </head>
    <body>
        <script>
              // 五、单个根元素

                            // 当构建一个 <blog-post>组件时，你的模板最终会包含的东西远远不止一个标题：

                                      /*
                                          <h3>{{title}}</h3>
                                      */
                            // 最起码，你会包含这篇博文的正文：

                                      /*
                                          <h3>{{title}}</h3>\
                                          <div v-html="context"></div>
                                      */
                            /*
                                 然而如果你在模板中尝试这样写，Vue会显示一个错误，并解释道：  
                                      every component must have a single root element （每个组件必须只有一个根元素）
                                    
                                  你可以将模板的内容包裹在一个父元素内，来修复这个未提：
                            */
                                      /*
                                          <div class="blog-post">
                                            <h3>{{ title }}</h3>
                                            <div v-html="content"></div>
                                          </div>
                                      */

                            /*
                                  看起来当组件变得越来越复杂的时候，我们的博文不只需要标题和内容，还需要发布日期、评论等等。
                                  为每个相关的信息定义一个prop会变得很麻烦：
                            */
                                        /*
                                            <blog-post
                                                v-for="post in posts"
                                                v-bind:key="post.id"
                                                v-bind:title="post.title"
                                                v-bind:content="post.content"
                                                v-bind:publishedAt="post.publishedAt"
                                                v-bind:comments="post.comments"
                                            ></blog-post>
                                        */
                            // 所以，是时候重构一下这个 <blog-post>组件了，让它变成接受一个短度的 post prop
                                        /*
                                            <blog-post
                                              v-for="post in posts"
                                              v-bind:key="post.id"
                                              v-bind:post="post"
                                            ></blog-post>
                                        */

                                        Vue.component('blog-post',{
                                          props:['post'],
                                          template:`
                                            <div class="blog-post">
                                                <h3>{{post.title}}</h3>
                                                <div v-html="post.content"></div>
                                            </div>
                                          `
                                        });

                            // 现在，不论何时为 post 对象添加一个新的 property,它都会自动地在 <blog-post>内可用。
        </script>
    </body>
</html>